<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>

  </div>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
  components: {TablePage},
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '手机号',
          placeholder: '请输入会员手机号查询',
          key: 'mobile'
        },

        {
          type: 'select',
          label: '状态',
          placeholder: '请选择状态查询',
          key: 'status',
          styles: {width: '150px'},
          options: [
            {label: '待付款', value: 0},
            {label: '已付款', value: 1},
            {label: '已退款', value: 2},
          ]
        },
        {
          type: 'select',
          label: '金额类型',
          placeholder: '请选择金额类型查询',
          key: 'amountType',
          styles: {width: '150px'},
          options: [
            {label: '余额', value: 'money'},
            {label: '喜糖', value: 'sugar'},
          ]
        },
        {
          type: 'date-picker',
          label: '选择时间',
          placeholder: '请选择时间',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          type: 'index',
          width: '80px'
        },
        {
          label: '交易会员',
          type: 'render',
          width: '230px',
          render: (data) => {
            if (!data.fields || !data.fields.user_base) return ''
            return `<div class="flex flex-center">
                        <img src="${data.fields.user_base.avatar}" style="width: 48px;height: 48px"/>
                        <div class="nickname">${data.fields.user_base.mobile}</div>
                    </div>
`;
          },
        },
        {
          label: '金额类型',
          width: '100px',
          prop: 'amountName',
        },
        {
          label: '交易金额',
          prop: 'money',
          width: '120px'
        },
        {
          label: '状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (data.status == 0)
              return `<span class="el-tag el-tag--warning mx-1 is-round"><span class="el-tag__content">待付款</span></span>`
            else if (data.status == 1) return `<span class="el-tag el-tag--success el-tag--dark mx-1 is-round"><span class="el-tag__content">已付款</span> </span>`
            else if (data.status == 2) return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">已退款</span> </span>`
            else if (data.status == 3) return `<span class="el-tag   el-tag--dark mx-1 is-round"><span class="el-tag__content">关闭</span> </span>`
            else return data.status;
          },
        },
        {
          label: '单号',
          prop: 'payCode',
          width: '210px'
        },
        {
          label: '交易备注',
          prop: 'title',
          width: '300px'
        },
        {
          label: '交易类型',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (data.type == 'ORDER') return '订单支付'
            else if (data.type == 'AMOUNT') return '账户充值'
            else return data.type;
          }
        },
        {
          label: '付款方式',
          prop: 'payType',
          width: '100px',
          type: 'render',
          render: (data) => {
            if (data.payType == 'shopkeeper_user_wx_pay:WXPAY_PROGRAM' || data.payType == 'shopkeeper_user_wx_pay:WXPAY') {
              return '微信支付'
            } else return data.payType;
          }
        },
        {
          label: '交易时间',
          prop: 'created',
          width: '200px',
          type: 'date'
        }
      ],
      data: {
        total: 1000,
        list: [],
        page: 1,
        size: 40
      },
      form: {},
      dialogRecharge: false,
      dialogEdit: false

    }
  },

  methods: {
    onload(data) {
      if (data && data.page)
        this.data.page = data.page;
      if (data && data.size)
        this.data.size = data.size;

      Object.assign(data, {
        direction: 'DESC',
        properties: ['id'],
        fields: ['user_base'],
        fidType: 'USER'
      })
      this.$api.apiQuery('/api/platform/finance/recharge/', data).then(res => {
        this.data.total = res.total
        this.data.list = res.data;
      })
    },
  }
}
</script>